import React, { Component } from 'react';
import '../scss/Collect.scss'
import { LeftOutlined } from '@ant-design/icons';
import { connect } from 'react-redux';
import { Toast } from 'antd-mobile'

import { wang_callect_push  , cancleCallect} from '../store/method';

import claa from '../views/views-images/收藏.png'

class Collect extends Component {

    ceshi1 = () => {
        this.props.cancleCallect();
    }

    render() {
        return (
           <>
                <div className='collect'>
                    <div className="top_collect">
                        <i onClick={ this.fuTop }><LeftOutlined /></i>
                        <h3>我的收藏 ( { this.props.call.length } )</h3>
                        <i></i>
                    </div>
                    <div className="shopping_collect">

                    {/* 渲染来这里 */}
                        {   
                        this.props.call.length == 0 ?
                        <>
                            <div className="claarimages">
                                <img src={ claa } alt="" />
                            </div>
                         </>  :
                                this.props.call.map((item,index)=>{
                                    return (
                                        <div className="yugpori" key={ index } >
                                        <div className="left">
                                            <div className="images" onClick={ () => { this.goPre(item) } }>
                                                <img src={ item.pic } alt="" />
                                            </div>
                                        </div>
                                        <div className="right">
                                            <div className="top">
                                            { item.name }
                                            </div>
                                            <div className="bottom">
                                                <div className="left_www">
                                                    <div className="yuanjia">原价 ￥270</div>
                                                    <div className="huodongjia">活动价 ￥ <span>{ item.salesPrice.value }</span></div>
                                                </div>
                                                <div className="right">
                                                    <div className="clear" onClick={ () => { this.clearCollect(item) } }>
                                                        取消收藏
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    )
                                })
                        }
                    </div>
                </div>
           </>
        );
    }
    
    fuTop = () => {
        this.props.history.go( -1 )
    }
    
    // 去往详情页  渲染详情页
    goPre = (item) => {
        this.props.history.push({ pathname:'/particulars',state:{id:item.id} })
    }
    
    // 取消收藏
    clearCollect = (item) => {
        this.props.cancleCallect(item)
        // 点击取消收藏重新调用一次收藏的异步函数
        setTimeout(() => { this.props.wang_callect_push() }, 500);
        setTimeout(() => { Toast.show({ icon: 'success', content: '取消收藏成功' }) }, 1000);
    }

    componentDidMount() {
        this.props.wang_callect_push()
    }
}

var newCollect = connect(
    state => {
        return {
            call:state.call
        }
    },
    dispatch => {
        return {
            wang_callect_push : function() {
                dispatch( wang_callect_push(  ) )
            },
            cancleCallect : function(item) {
                dispatch( cancleCallect( item ) )
            }
        }
    }

)( Collect )

export default newCollect;